<template>
    <view>
        <u-search placeholder="搜索单间出租"
                  :focus="true"
                  :showAction="false"
                  margin="30rpx"
                  v-model="keyword"
                  @search="searchHandler"
        ></u-search>

        <u-gap height="20"></u-gap>
        <u-text text="搜索记录" size="16" margin="20rpx"></u-text>

        <view class="history">
            <view style="margin: 0 20rpx" v-for="(item,index) in history">
                <u-tag :text="item" type="warning" plain closable @close="closeHandler(index)" @click="searchHandler(item)"></u-tag>
            </view>

        </view>

        <!--<filter-bar></filter-bar>-->

        <!--<view class="content">-->
            <!--<view class="left">-->
                <!--<view class="content-text"-->
                      <!--:class="index===isActive && 'orc'"-->
                      <!--@click="changeList(index)"-->
                      <!--v-for="(item,index) in contents"-->
                      <!--:key="index + 'left'">{{item.title}}</view>-->
            <!--</view>-->
            <!--<view class="right">-->
                <!--<view class="content-text"-->
                      <!--@click="selectChild(index)"-->
                      <!--:class="index===isChildActive && 'orc'"-->
                      <!--v-for="(item,index) in right_data"-->
                      <!--:key="index + 'right'">{{item.title}}</view>-->
            <!--</view>-->
        <!--</view>-->
    </view>
</template>

<script>
    import filterBar from "../../../components/filter-bar";
    export default {
        name: "search",
        components:{
            filterBar
        },
        data(){
            return{
                history: uni.getStorageSync('search') ?? [],
                // isActive: 0,
                // isChildActive:null,
                keyword:'',
                // right_data:[],
                // contents:[
                //     {
                //         title:'附近',
                //         child:[
                //             {
                //                 title:'全合肥',
                //             },
                //             {
                //                 title:'芜湖',
                //             },
                //             {
                //                 title:'蚌埠',
                //             },
                //             {
                //                 title:'大司马',
                //             }
                //         ]
                //     },
                //     {
                //         title:'区域',
                //         child:[
                //             {
                //                 title:'1000m以内',
                //             },
                //             {
                //                 title:'2000m以内',
                //             },
                //             {
                //                 title:'3000m以内',
                //             },
                //         ]
                //     },
                //     {
                //         title:'地铁',
                //         child:[
                //             {
                //                 title:'1号线',
                //             },
                //             {
                //                 title:'2号线',
                //             },
                //             {
                //                 title:'3号线',
                //             },
                //             {
                //                 title:'5号线',
                //             },
                //         ]
                //     },
                // ]
            }
        },
        onLoad() {
            // this.right_data = this.contents[0].child;
        },
        methods:{
            // changeList(index){
            //     this.isActive = index;
            //     this.isChildActive = null;
            //     this.right_data = this.contents[index].child;
            // },
            // selectChild(index){
            //     this.isChildActive = index;
            // },
            searchHandler(value){
                let  array = uni.getStorageSync('search');
                if (array === undefined || array.length === 0){
                    array = [];
                }

                if (array.includes(value)) {
                    array.splice(array.indexOf(value),1);
                }

                if (array.length >= 5){
                    array.pop()
                }

                array.push(value);

                // 本地存储搜索记录
                uni.setStorageSync('search',array.reverse());

                uni.$emit('search', {keyword: value});

                uni.navigateBack({delta: 1});
            },

            closeHandler(index){
                let  array = uni.getStorageSync('search');
                if (array === undefined || array.length === 0){
                    array = [];
                }
                array.splice(index,1);

                // 本地存储搜索记录
                uni.setStorageSync('search',array.reverse());

                this.history = uni.getStorageSync('search');
            }
        }
    }
</script>

<style scoped>
    .content{
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-content: center;
        margin-top: 30rpx;
    }

    .left{
        width: 40%;
        border-right: 1px solid gray;
    }

    .right{
        width: 59%;
    }

    .content-text{
        width: 100%;
        height: 48rpx;
        margin: 24rpx;
        font-size: 32rpx;
    }
    .orc{
        color: #f17d30;
    }

    .history{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin: 20rpx;
    }
</style>